<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>列表渲染</title>
		<script src="../../JS/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>人员列表（遍历数组）</h2>
			<ul>
				<li v-for="(p,key) of persons" :key="p.id">
					{{p.name}} - {{p.age}} - {{p.id}}
				</li>
			</ul>
			<h2>汽车信息（遍历对象）</h2>
			<ul>
				<li v-for="(value,key) of car" :key="key">{{key}} -- {{value}}</li>
			</ul>
			<h2>字符串遍历</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">{{char}} -- {{index}}</li>
			</ul>
			<h2>次数遍历</h2>
			<ul>
				<li v-for="(num,index) of 5" :key="num">{{num}}--{{index}}</li>
			</ul>
		</div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示
			const vm = new Vue({
				el: '#root',
				data: {
					persons: [
						{id: '10', name: '张三', age: 18},
						{id: '20', name: '李四', age: 20},
						{id: '30', name: '王五', age: 23}
					],
					car: {
						name: '奥迪A7',
						peice: '60万',
						color: '黑色'
					},
					str: 'hello'
				}
			})
		</script>
	</body>
</html>
